<template>
    <div class="MyInformation">
        <div class="rx-center">
            <ul class="MyInformation-ul">
                <li class="MyInformation-top">{{i18n('information','基本信息')}}</li>
                <li class="MyInformation-li">
                    <span>头像</span>
                        <uni-file-picker
                         style="margin: 0.5rem 0rem"
                         limit="1"
                         v-model="files"
                         :del-icon="false"
                         disable-preview
                         @select="selectFile"
                         :imageStyles="imageStyles"
                         file-mediatype="image">
                    </uni-file-picker>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('name', '姓名') }}</span>
                    <span>{{ osUser.fullName }}</span>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('account', '账号') }}</span>
                    <span>{{ osUser.userNo }}</span>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('birthday', '出生日期') }}</span>
                    <span>{{ osUser.birthday }}</span>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('entryTime', '入职时间') }}</span>
                    <span>{{ osUser.entryTime }} </span>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('sex', '性别') }}</span>
                    <span>
                        <label style="margin-right: 0.5rem"><radio @click="osUser.sex='male'" :checked="osUser.sex==='male'" />{{ i18n('male', '男') }}</label>
                        <label ><radio @click="osUser.sex='female'" :checked="osUser.sex==='female'" />{{ i18n('female', '女') }}</label>
                    </span>
                </li>
            </ul>
            <ul class="MyInformation-ul">
                <li class="MyInformation-top">{{i18n('details','详细资料')}}</li>
                <li class="MyInformation-li">
                    <span>{{ i18n('cellphone', '手 机') }}</span>
					<input class="MyInformation-input" v-model="osUser.mobile"/>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('mail', '邮 件') }}</span>
					<input class="MyInformation-input" v-model="osUser.email" />
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('address', '地 址') }}</span>
					<input class="MyInformation-input" v-model="osUser.address"/>
                </li>
                <li class="MyInformation-li">
                    <span>QQ</span>
					<input class="MyInformation-input" v-model="osUser.qq"/>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('urgentContact', '紧急联系人') }}</span>
					<input class="MyInformation-input" v-model="osUser.urgent"/>
                </li>
                <li class="MyInformation-li">
                    <span>{{ i18n('urgentPhone', '紧急联系人手机') }}</span>
					<input class="MyInformation-input" v-model="osUser.urgentMobile"/>
                </li>
            </ul>
        </div>
        <button class="MyInformation-button" type="primary" @click="editInfo">{{ i18n('commitBtn', '保存') }}</button>
    </div>
</template>

<script>
import MainLayoutApi from "@/api/MainLayout/MainLayoutApi";
import TokenUtil from "../../common/TokenUtil";
import {FormApi} from "@/api/FormApi.js";

export default {
    name: "RxInformation",
    data() {
        return {
            osUser: {},
            userId: '',
            imageStyles:{
                width:70,
                height:70,
                border: {
                    radius: '50%'
                }
            },
            files:[],
        }
    },
    created() {
        this.userId = uni.getStorageSync("user").userId
        this.getInfo();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "oaLang", key);
        },
        getImageUrl(fileId) {
            let token = TokenUtil.getToken();
            return this.realUrl() + "/api-system/system/core/sysFile/downloadScale/" + fileId + "?accessToken=" + token;
        },
        selectFile(e) {
            var imageSrc = e.tempFilePaths[0];
            FormApi.upload({
                filePath: imageSrc,
                fileType: 'image'
            }).then(res => {
                if(res.data && res.data.data){
                    this.files=[{
                        url:this.getImageUrl(res.data.data[0].fileId)
                    }]
                    this.osUser.photo = res.data.data[0].fileId
                }
            })
        },
        getInfo() {
            MainLayoutApi.editUser(this.userId).then(res => {
                this.osUser = res.user;
                this.osUser.mainDepId = res.mainDepId;
                this.osUser.mainDepName = res.mainDepName;
                this.files=this.osUser.photo?[{url:this.getImageUrl(this.osUser.photo)}]:[]
            })
        },
        //保存
        editInfo() {
            let self = this;
            MainLayoutApi.saveUser(this.osUser).then(res => {
                uni.showToast({
                    title: this.i18n('successfully', '提交成功'), // 消息内容
                    duration: 2000, // 持续时间（单位：毫秒）
                    icon: 'none' // 图标类型（可选值：success/loading/none）
                });
                self.getInfo(self.userId);
            })
        }
    }
}
</script>

<style scoped>
.MyInformation {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.rx-center {
    flex: 1;
    overflow: auto;
}

.MyInformation-button {
    margin: 0.5rem;
    border-radius: 3rem;
    font-size: 0.9rem;
    background: rgb(66, 133, 242);
}

.MyInformation-ul {
    margin: 1rem;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
    padding: 0rem;
    border-radius: 0.5rem;
}

.MyInformation-ul li {
    border-bottom: 1px solid #ececec;
    display: flex;
    min-height: 3rem;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding: 0rem 0.5rem;
}

.MyInformation-ul li:last-child {
    border-bottom: none;
}

.MyInformation-ul li::after {
    content: '';
    display: block;
    clear: both;
}

.MyInformation-ul li span {
    color: rgba(0, 0, 0, 0.85);
}

.MyInformation-ul input {
    height: 3rem;
    text-align: right;
    border: none;
}
.MyInformation-li{
    display: flex;
}
.MyInformation-li span:nth-of-type(2){
    flex: 1;
    text-align: right;
}
.MyInformation-input{
    flex: 1;
    position: relative;
}
.MyInformation-top::after{
    color:rgba(66, 133, 244, 1);
    top: 1rem;
    position: absolute;
    left: 0rem;
    font-size: 1rem;
    width: 0.2rem;
    height: 1rem;
    background: rgba(66, 133, 244, 1);
}
.MyInformation-top{
    font-size: 1rem;
}
.MyInformation >>>.uni-file-picker__container{
    justify-content: flex-end;
}
.MyInformation>>>.uni-progress-bar{
    display: none;
}
.MyInformation>>>.icon-add{
    width: 2rem;
    height: 3px;
}
</style>
